<template>
  <a-card :bordered="false">
    <div class="card-title">{{ $route.meta.title }}</div>
    <div class="table-operator">
      <!-- 搜索板块 -->
      <a-row class="row-item-search" style="display: flex;align-items: center;">
        <span class="demonstration" style="color: #666666">请选择颜色：</span>
        <el-color-picker v-model="color" size="large" @change="setcolorEvent"></el-color-picker>
      </a-row>
    </div>
    <div><span style="color: #666666">分流开关：</span> <a-switch checked-children="开" un-checked-children="关" v-model:checked="isShunt" @click="switchchangeEvent" /></div>
  </a-card>
</template>

<script>
import * as Api from '@/api/ad'
// import elColorPicker from 'el-color-picker'
import elColorPicker from './elColorPicker/index.vue';
export default {
  name: 'Index',
  components:{elColorPicker},
  data () {
    return {
      color: '#F2F2F2',
      isShunt: false
    }
  },
  created () {
    this.getdataEvent()
  },
  methods: {
    getdataEvent () {
      Api.adgetColorEvent().then(res => {
        this.color = res.data.color
        this.isShunt = res.data.isShunt === 1
      })
    },
    setcolorEvent (val) {
      this.color = val
      Api.adsetColorEvent({color: this.color || '#F2F2F2', isShunt: this.isShunt ? 1 : 2}).then(res => {
        this.getdataEvent()
      })
    },
    switchchangeEvent(){
      Api.adsetColorEvent({color: this.color || '#F2F2F2', isShunt: this.isShunt ? 1 : 2}).then(res => {
        this.getdataEvent()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.ant-card-body {
  padding: 22px 29px 25px;
}
</style>
